<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
			.mycss{border: 2px solid #fff000;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li><img src="img/doc.gif">获取原始图片路径</li>
					<li><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li><img src="img/doc.gif">创建图片</li>
					<li><img src="img/doc.gif">克隆图片</li>
					<li><img src="img/doc.gif">改变图片</li>
					<li><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}
			//189000950顾啟思
			//获取信息的li标签
			let lujing = document.querySelectorAll("#menu1>li");
			console.log(lujing);
			//获取路径名称
			let lujingming = document.querySelector("#fruit").src;
			//获取路径显示位置
			let weizhi = document.querySelector("#msg1");
			let shuiguo = document.querySelector("#msg2");
			let chuangjiantupian = document.querySelector("#msg3");
			let kelongtupian = document.querySelector("#msg4");

			// 点击添加图片路径名	
			lujing[0].addEventListener('click', function(){
				weizhi.innerHTML = lujingming;
			});
			//获取水果的值
			let fruit = document.getElementsByTagName("input");
			//打印水果的值
			lujing[1].addEventListener('click', function(){
				var arr = [];
				for(i = 0;i <fruit.length;i++){
					if(fruit[i].checked == true){
						arr.push(fruit[i].value);
						shuiguo.innerHTML = arr;
					}
				}
			});
			//获取操作元素下的li标签
			let caozuo = document.querySelectorAll("#menu2>li");
			console.log(caozuo);
			//创建图片
			caozuo[0].addEventListener('click', function(e){
				var bigImg = document.createElement("img"); //创建一个img元素
				bigImg.src = "http://gu_qi_si.gitee.io/client-software-technology/shiyan/%E5%AE%9E%E9%AA%8C5/img/grape.jpg";
				chuangjiantupian.appendChild(bigImg);
				/*//解除匿名函数的事件绑定
					removeEventListener()
					e.type相当于click
					arguments.callee 指的是当前函数体
				*/
				this.removeEventListener(e.type,arguments.callee,false);
			});
			//克隆图片
			caozuo[1].addEventListener('click', function(e){
				var kelongImg = document.createElement("img"); //创建一个img元素
				kelongImg.src = "http://gu_qi_si.gitee.io/client-software-technology/shiyan/%E5%AE%9E%E9%AA%8C5/img/fruit.jpg";
				kelongtupian.appendChild(kelongImg);
				/*//解除匿名函数的事件绑定
					removeEventListener()
					e.type相当于click
					arguments.callee 指的是当前函数体
				*/
				this.removeEventListener(e.type,arguments.callee,false);
			});
			//改变图片
			caozuo[2].addEventListener('click', function(){
				let shuiguotu = document.querySelector("#fruit");
				shuiguotu.src = "img/grape.jpg";
			});
			//删除图片
			caozuo[3].addEventListener('click', function(){
				let shuiguotu = document.querySelector("#fruit");
				shuiguotu.remove();
			});

			//获取操作样式元素下的li标签
			let caozuoyangshi = document.querySelectorAll("#menu3>li");
			//为原始图片加上行间样式
			caozuoyangshi[0].addEventListener('click', function(){
				let shuiguotu = document.querySelector("#fruit");
				shuiguotu.setAttribute('class','mycss');
			});
			
			//为所有的fieldset加上内部样式
			caozuoyangshi[1].addEventListener('click', function(){
				//获取所有的fieldset
				let fieldset = document.querySelectorAll("fieldset");
				for(i of fieldset){
					i.style.backgroundColor="skyblue";
				}
			});


		</script>
	</body>
</html>
